<template>
  <div class="order">
    <ul id="order_ul">
      <!-- 全部订单 -->
      <!-- <li></li> -->
      <li v-for="(v,k) in order.slice((currentPage-1)*3,(currentPage)*3)" :key="k">
        <div id="order_top">
          <div>
            <span>订单编号：&nbsp;</span>
            <span>{{v.orderID}}</span>
          </div>
        </div>
        <el-row>
          <el-col id="order_img" :xs="8" :sm="8" :md="8" :lg="8">
            <img :src="getOrderimg(v.carPic1)" alt width="150px" />
          </el-col>
          <el-col id="order_text" :xs="12" :sm="12" :md="12" :lg="12">
            <ul>
              <li>
                <h3>{{v.carName}}</h3>
              </li>
              <li>
                <span>车系:</span>&nbsp;&nbsp;
                <span>{{v.carSeries}}</span>
              </li>
              <li>
                <span>取车时间:</span>
                <span>&nbsp;{{v.pickDate|dateDay}}</span>
                <br />
                <span>还车时间:</span>
                <span>&nbsp;{{v.returnDate|dateDay}}</span>
              </li>
            </ul>
          </el-col>
          <el-col id="order_right" :xs="4" :sm="4" :md="4" :lg="4">
            <p>
              <strong>￥{{v.orderPrice}}</strong>
            </p>
            <span class="btn btn-warning" @click="carId=v.carId,Rebook()">再次预定</span>
          </el-col>
        </el-row>
      </li>
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="3"
        :pager-count="5"
        :hide-on-single-page="true"
        layout="prev, pager, next"
        :total="allorders"
        @current-change="allorderpageChange"
        :current-page.sync="currentPage"
        style="text-align:center"
      ></el-pagination>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchOrders: []
    };
  },
  created() {
    this.$axios
      .post("http://localhost:3000/personal/searchOrder", {
        orderId: this.$route.query.orderId
      })
      .then(res => {
        console.log("查询结果：", res.data.data);
        this.searchOrders = res.data.data;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  methods: {
    getOrderimg(Orderimg) {
      let path = "http://localhost:3000/upload/" + Orderimg;
      return path;
    }
  }
};
</script>
<style>
/* * {
  margin: 0;
  padding: 0;
}
.order {
  flex: 2;
}

ul {
  list-style: none;
}

#messagebody {
  height: 500px;
}

#order_nav > ul {
  border-bottom: 2px solid grey;
}

#order_nav > ul > li {
  width: 80px;
  height: 30px;
  display: inline-block;
  text-align: center;
  margin-bottom: 5px;
  cursor: pointer;
}

#order_ul > li {
  height: 150px;
  border: 1px solid transparent;
  box-shadow: 0 0 6px #ccc;
  margin-bottom: 20px;
}

#order_top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #bbb;
  display: flex;
}

#order_top strong {
  margin-left: 10px;
}

#order_main {
  width: 100%;
  height: 110px;
  background-color: #fff;
  display: flex;
}

#order_main img {
  width: 150px;
  flex: 2;
  margin: 10px;
  margin-top: 15px;
}

#order_text {
  margin-top: 15px;
}

#order_text > ul {
  flex: 5;
}

#order_text > ul > li {
  margin: 8px;
}

#order_text li h4 {
  display: inline-block;
  margin: 0px;
}

#order_right {
  flex: 2;
  margin-top: 15px;
  text-align: center;
}

#order_over_ul > li {
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
  background-color: #fff;
  padding-bottom: 20px;
}

#order_over_top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #bbb;
  display: flex;
  position: relative;
}

#order_over_top > div {
  margin-left: 10px;
}

#order_over_top > div:last-child {
  text-align: left;
  font-size: 10px;
  color: gray;
  position: absolute;
  right: 10px;
}

#order_over_main {
  margin-top: 10px;
  margin-left: 10px;
}

#order_over_img > img {
  width: 150px;
}

#order_over_myorder {
  width: 100%;
  height: 100px;
  display: flex;
  margin-top: 20px;
  background-color: #f1f1f1;
  margin-left: 0;
  cursor: pointer;
}

#myorder_img {
  width: 200px;
  height: 100%;
}

#myorder_img > img {
  width: 100%;
  height: 100%;
}

#myorder_text {
  margin-left: 10px;
}

#myorder_text li {
  margin: 5px;
}

#myorder_text h4 {
  display: inline-block;
}

#order_over_bottom {
  margin-top: 20px;
  margin-bottom: 10px;
} */
</style>
